<template>
    <view  class="incomeP" >  
      <!-- 收益 -->
            <view  class="totle">
                <view class="totle-title" >总收益统计</view>
                <view class="totle-content">
                    <view class="totle-content-item">
                    <view>¥1987.00</view>
                    <view>累计收益</view>
                    </view>
                    <view class="totle-content-item">
                    <view>¥1987.00</view>
                    <view>实际收益</view>
                    </view>
                    <view class="totle-content-item">
                    <view>¥1987.00</view>
                    <view>买入宝总扣款</view>
                    </view>
                </view>
            </view>

                <view class="buying"  @click="gommbM" >
                        
                        <view class="buying-item">
                        <img class="img-pur" src="../../style/image/stati/A28.png" alt="">
                        <view class="buy-title" >宝买卖</view>
                        </view>

                        <view class="buying-item"   >
                        <view class="prolify"  >总收益  <span :style="{ margin:'0rem 0.3rem' }" >  ¥9878.00</span></view>
                         <img  class="img-arrow" src="../../style/image/stati/A27.png" alt="">
                        </view>
                </view>

                     <view class="prolifying" >
                        
                        <view class="buying-item">
                        <img class="img-pur" src="../../style/image/stati/A35.png" alt="">
                        <view class="buy-title" >分润</view>
                        </view>

                        <view class="buying-item">
                        <view class="prolify"  >总收益  <span :style="{ margin:'0rem 0.3rem' }" >  ¥9878.00</span></view>
                         <img  class="img-arrow" src="../../style/image/stati/A27.png" alt="">
                        </view>
                </view>

                <view class="productP" >

                <view class="searchPP">
                <view class="searchP">
                <view class="search" :style="{ width:'100%' }" >
                    <u-search placeholder="请输入商户姓名或电话"  
                    shape="round"
                    v-model="keyword"
                    :show-action='false'
                    ></u-search>
                </view>

                <view @click="celendarM" class="celendar">
                <img :style="{ width:'1.1rem',height:'1.1rem', margin:'0rem 0.5rem'}" src="../../style/image/stati/A33.png" alt="">
                <view>2019.10.09</view>
                </view>

                </view>
                </view>
               

                <view>
                <u-dropdown>
			<u-dropdown-item v-model="value1" title="全部商户"  active-color='#02af74':options="options1"></u-dropdown-item>
			<u-dropdown-item v-model="value2" title="全部设备" active-color='#02af74' :options="options2"></u-dropdown-item>
		         </u-dropdown>
                </view>


              
                <view class="totle-contents">
                    <view class="totle-contents-item">
                    <view>¥1987.00</view>
                    <view>累计收益</view>
                    </view>
                    <view class="totle-contents-item">
                    <view>¥1987.00</view>
                    <view>实际收益</view>
                    </view>
                    <view class="totle-contents-item">
                    <view>¥1987.00</view>
                    <view>买入宝总扣款</view>
                    </view>
                </view>

                <view class="allDataC" v-for="(item,index) in allData " :key="index" >

                 <view   class="allDataC-item">

                    <view class="allDataC-item-title">
                   <view :style="{padding:'0.5rem 0rem',display:'flex',justifyContent: 'space-between'  }" class="allDataC-item-view" >
                    <view  >充电宝SN码：6767676</view>
                    <view>UC8909</view>
                   </view>
                    </view>

                    <view class="allDataC-item-content">
                        <view class="contentP" :style="{display:'flex',justifyContent: 'space-between'  }" >

                            <view class="content-info">
                                 <view  class="content-info-item">
                                 <view> 商户名称：<span>拉卡拉总代理</span></view>
                                
                                </view>
                                <view class="content-info-item">
                                <view> 租借时间：<span>09-02  10:16</span></view>
                                </view>
                                <view class="content-info-item">
                                <view> 归还时间：<span>09-02  10:16</span></view>
                                </view>
                            </view>

                            <view class="proliify">
                              +9.00元
                            </view>
                        </view>
                    </view>
                      
                 </view>
                
                </view>
           

                </view>

               <u-calendar 
               v-model="show"
                :mode="mode" 
                @change="change"
                :safe-area-inset-bottom='true'
                ></u-calendar>
    </view>
          
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  public keyword=''  //请输入商户姓名或电话
  public show = false;
  public allData=['1','2']
  public value1 = 1;
  public value2 = 2;
  public options1 = [
    {
      label: "默认排序",
      value: 1,
    },
    {
      label: "距离优先",
      value: 2,
    },
    {
      label: "价格优先",
      value: 3,
    },
  ];
  public options2 = [
    {
      label: "去冰",
      value: 1,
    },
    {
      label: "加冰",
      value: 2,
    },
  ];

  created() {
       document.body.scrollTop = document.documentElement.scrollTop = 0;
    //    alert(1)
  }

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
  }

  gommbM(){

    console.log('去mmb')

     uni.navigateTo({
      url: '../item/buyNull/def',
    });


  }
  celendarM(){
    
     document.body.scrollTop = document.documentElement.scrollTop = 0;
    this.show=!this.show
    
  }
}
</script>

<style  scoped>
.incomeP {
  /* padding: 1rem; */
}
.totle-title {
  padding: 0.8rem;
  text-align: center;
  font-size: 1rem;
  color: white;
}
.totle {
  background: #02b074;
  box-shadow: 0rem 0rem 1rem 0rem rgba(2, 176, 116, 0.3);
  border-radius: 0.8rem;
  margin: 1rem;
}
.totle-content {
  border-bottom-right-radius: 0.8rem;
  border-bottom-left-radius: 0.8rem;
  background-color: white;

  justify-content: space-between;
  display: flex;
  padding: 1rem 0.5rem;
}
.totle-content-item {
  width: 33.3%;
  text-align: center;
}

.totle-content-item :first-child {
  font-size: 0.95rem;
  font-family: PingFang SC;
  font-weight: 300;
  color: #02b074;
}

.totle-content-item :nth-child(2) {
  font-size: 0.75rem;
  font-family: PingFang SC;
  font-weight: 399;
}

.buying {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0.8rem;
  background: linear-gradient(-90deg, #0ad272, #02b074);
  border-radius: 0.8rem;
  margin: 1rem 0rem;
  margin: 1rem;
}
.prolifying {
 
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0.8rem;
  background: linear-gradient(-90deg, #4bb9fa, #2e72ff);
  border-radius: 0.8rem;
 margin: 1rem;
}
.buying-item {
  display: flex;
  align-items: center;
}
.buying-item > .img-pur {
  width: 1.5rem;
}
.buying-item > .img-arrow {
  width: 0.6rem;
}
.buy-title {
  font-size: 0.83rem;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ffffff;
  margin-left: 0.3rem;
}
.prolify {
  font-size: 0.78rem;
  font-family: PingFang SC;
  font-weight: 300;
  color: #ffffff;
}

.productP {
  background-color: #f3f5f7;
  padding: 0.4rem 0rem;
}
.searchPP {
  background-color: white;
  padding: 0.5rem;
}
.searchP {
  background-color: white;
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.celendar {
  display: flex;
  align-items: center;
}

.celendar :nth-child(2) {
  font-size: 0.72rem;
  font-family: PingFang SC;
  /* font-weight: 300; */
  color: #000000;
}

.totle-contents {
  /* border-bottom-right-radius: 0.8rem;
    border-bottom-left-radius: 0.8rem; */
  border-radius: 0.2rem;
  background-color: white;
  justify-content: space-between;
  display: flex;
  padding: 1rem 0.5rem;
  margin: 0rem 1rem 0.5rem 1rem;
}
.totle-contents-item {
  width: 33.3%;
  text-align: center;
}

.totle-contents-item :first-child {
  font-size: 0.85rem;
  font-family: PingFang SC;
  font-weight: 300;
  color: #02b074;
}
.totle-contents-item :nth-child(2) {
  font-size: 0.65rem;
  font-family: PingFang SC;
  font-weight: 300;
}

.allDataC{
    margin: 1rem;
    border-radius: 0.2rem;
    background-color: white;
}

.allDataC-item-title{

    /* display: flex;
    justify-content: space-between; */
    margin: 1rem;
    border-bottom: 1px solid #ebebeb;
}

.allDataC-item-view :first-child{

   font-size: 0.78rem;
font-family: PingFang SC;
font-weight: 500;
color: #000000;
}

.allDataC-item-view :nth-child(2){
font-size: 0.78rem;
font-family: PingFang SC;
font-weight: 500;
color: #02B074;

}

.contentP{

    display: flex;
    align-items: center;
}

.content-info{

}
.content-info-item{
    padding: 0rem 1rem 0.5rem 1rem ;
}
.content-info-item >view{
   color: #9b9b9b;
font-size: 0.78rem;
font-family: PingFang SC;
}
.content-info-item span {
   color:black;

font-size: 0.78rem;
font-family: PingFang SC;
font-weight: 400;
}

.proliify{
font-size: 0.95rem;
font-family: PingFang SC;
font-weight: bold;
color: #FF0000;
padding: 0rem 1rem 1rem 1rem;
}







</style>